import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const video = document.createElement('video');
video.src = '../../textures/MaryOculus.mp4';
video.autoplay = true;
video.setAttribute('controls', true);
video.oncanplay = () => {
  const scene = new THREE.Scene();

  /**
   * 通过 Three.js 的 VideoTexture 类，可已将视频作为贴图使用
   */
  // video对象作为 VideoTexture 构造参数纹理对象
  const txr = new THREE.VideoTexture(video);
  txr.minFilter = THREE.LinearFilter;
  txr.magFilter = THREE.LinearFilter;
  txr.format = THREE.RGBFormat;
  const sphereGeo = new THREE.SphereGeometry(200, 100, 100);
  const sphereMap = new THREE.MeshPhongMaterial({
    map: txr
  });
  const mesh = new THREE.Mesh(sphereGeo, sphereMap);
  scene.add(mesh);

  const al = new THREE.AmbientLight(0xffffff);
  scene.add(al);
  const k = innerWidth / innerHeight,
        s = 400,
        camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
  camera.position.set(0, 0, 400);
  camera.lookAt(scene.position);
  const renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0xaaaaaa);
  renderer.setSize(innerWidth, innerHeight);
  document.body.appendChild(renderer.domElement);
  new OrbitControls(camera, renderer.domElement);

  (function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  })();
}
document.body.appendChild(video);
